import { Button, Card, Input, Form, InputNumber, Radio, Empty, Checkbox,Tooltip, message, Affix,Row,Col,Table, Tag} from 'antd';
import { connect, history} from 'umi';
import React, { useEffect,useState } from 'react';
import {
  DownSquareFilled,
  UpSquareFilled,
  CloseSquareFilled,
} from '@ant-design/icons';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import styles from './style.less';
import db from '@/utils/localstorage';
import { updateVipCard } from './service';
import SearchForm from './searchForm'

const FormItem = Form.Item;
const imgs=['http://mmm.supercube.vip/ck.png','http://mmm.supercube.vip/cz.png','http://mmm.supercube.vip/qika.png']
const fortmatText= (courseType,category) =>{
  let catalogues =[];
  if(db.get("dictTypeList")){
    if(courseType=='3'){
      catalogues = db.get("dictTypeList")["private_course_catalogue"]
    }else{
      catalogues = db.get("dictTypeList")["group_course_catalogue"]
    }
    let result = catalogues.filter((item)=>{
      if(item.value==category){
        return item
      }
    })
    return Array.isArray(result)&&result.length>0?result[0].label:""
  }
return "";
}
let vipCardTemp ={}
const BasicForm = props => {
  const { submitting,dispatch, shopOptionList,vipCard,cloneVipCard} = props;
  const [form] = Form.useForm();
  const [setting, setSetting] = useState(false);
  const [singlePlan, setSinglePlan] = useState(false);
  const [groupPlan, setGroupPlan] = useState(false);
  const [smallGroupPlan, setSmallGroupPlan] = useState(false);
  const [equipmentGroupPlan, setEquipmentGroupPlan] = useState(false);

  const [smallClassKeys, setSmallClassKeys] = useState([]);
  const [bigClassKeys, setBigClassKeys] = useState([]);
  const [privateClassKeys, setPrivateClassKeys] = useState([]);
  const [equipmentClassKeys, setEquipmentClassKeys] = useState([]);

  const [smallClassValue, setSmallClassValue] = useState("");
  const [bigClassValue, setBigClassValue] = useState("");
  const [equipmentClassValue, setEquipmentClassValue] = useState("");
  const [privateClassValueOne2One, setPrivateClassValueOne2One] = useState("");
  const [privateClassValueOne2Two, setPrivateClassValueOne2Two] = useState("");
  // const [privateClassValueOne2Three, setPrivateClassValueOne2Three] = useState("");

  const [smallClassSingleValue, setSmallClassSingleValue] = useState({});
  const [equipmentClassSingleValue, setEquipmentClassSingleValue] = useState({});
  const [bigClassSingleValue, setBigClassSingleValue] = useState({});
  const [privateClassSingleValueOne2One, setPrivateClassSingleValueOne2One] = useState({});
  const [privateClassSingleValueOne2Two, setPrivateClassSingleValueOne2Two] = useState({});
  // const [privateClassSingleValueOne2Three, setPrivateClassSingleValueOne2Three] = useState({});

  //储值卡类型
  const [cardType, setCardType] = useState("");
  const venueId = db.get("venue").id;
    /**
   * 大班课统一设置价格
   */
  const bigClassSetting = value =>{
    setBigClassSingleValue({})
    setBigClassValue(value)
  } 
  
  /**
   * 大班课单个设置价格
   * @param {*} value 
   */
  const bigSingleClassSetting = (value,record) =>{
    let _bigClassSingleValue={...bigClassSingleValue}
    _bigClassSingleValue[record.courseId]=value
    setBigClassSingleValue(_bigClassSingleValue)
  }

  /**
   * 小班课统一设置价格
   */
  const smallClassSetting = (value,record)  =>{
    setSmallClassSingleValue({})
    setSmallClassValue(value)
  }

  const equipmentClassSetting = (value, record) => {
    setEquipmentClassSingleValue({})
    setEquipmentClassValue(value)
  }

  /**
   * 小班课单个设置价格
   * @param {*} value 
   * @param {*} record 
   */
  const smallSingleClassSetting = (value, record) => {
    let _smallClassSingleValue = { ...smallClassSingleValue }
    _smallClassSingleValue[record.courseId] = value
    setSmallClassSingleValue(_smallClassSingleValue)
  }

  const equipmentSingleClassSetting = (value, record) => {
    let _equipmentClassSingleValue = { ...equipmentClassSingleValue }
    _equipmentClassSingleValue[record.courseId] = value
    setSmallClassSingleValue(_equipmentClassSingleValue)
  }



   /**
   *  私教课1v1统一设置价格
   */
  const privateClassOne2OneSetting = (value,record)  =>{
    setPrivateClassSingleValueOne2One({})
    setPrivateClassValueOne2One(value)
  }

   /**
   *  私教课1v2统一设置价格
   */
  const privateClassOne2TwoSetting = (value,record)  =>{
    setPrivateClassSingleValueOne2Two({})
    setPrivateClassValueOne2Two(value)
  }

   /**
   *  私教课1v3统一设置价格
   */
  // const privateClassOne2ThreeSetting = (value,record)  =>{
  //   setPrivateClassSingleValueOne2Three({})
  //   setPrivateClassValueOne2Three(value)
  // }

  /**
   * 私教课1v1单个设置价格
   * @param {*} value 
   * @param {*} record 
   */
  const privateSingleOne2OneClassSetting = (value,record) =>{
    let _privateClassSingleValueOne2One={...privateClassSingleValueOne2One}
    _privateClassSingleValueOne2One[record.courseId]=value
    setPrivateClassSingleValueOne2One(_privateClassSingleValueOne2One)
  }

  /**
   * 私教课1v1单个设置价格
   * @param {*} value 
   * @param {*} record 
   */
  const privateSingleOne2TwoClassSetting = (value,record) =>{
    let _privateClassSingleValueOne2Two={...privateClassSingleValueOne2Two}
    _privateClassSingleValueOne2Two[record.courseId]=value
    setPrivateClassSingleValueOne2Two(_privateClassSingleValueOne2Two)
  }

  /**
   * 私教课1v1单个设置价格
   * @param {*} value 
   * @param {*} record 
   */
  // const privateSingleOne2ThreeClassSetting = (value,record) =>{
  //   let _privateClassSingleValueOne2Three={...privateClassSingleValueOne2Three}
  //   _privateClassSingleValueOne2Three[record.courseId]=value
  //   setPrivateClassSingleValueOne2Three(_privateClassSingleValueOne2Three)
  // }
  
  const bigClasscolumns = [
    {
      title: '课程名称',
      dataIndex: 'courseName',
      render: text => <><Tag color="blue">大班</Tag><span>{text}</span></>
    },
    {
      title: '大班',
      dataIndex: 'type',
      render: text => <span>大班</span>
    },
    {
      title: '课程类型',
      dataIndex: 'category',
      render: (text,record) => <span>{fortmatText('1',text)}</span>
    },
    {
      title: <><span>&nbsp;&nbsp;&nbsp;统一设置</span>&nbsp;&nbsp;&nbsp;&nbsp;<InputNumber min={0} onChange={bigClassSetting}/>&nbsp;&nbsp;元/人</>,
      dataIndex: 'costPerClassPersonGroup',
      render: (text, record) => <><span>每节课收费</span>&nbsp;&nbsp;&nbsp;<InputNumber min={0} onChange={value => bigSingleClassSetting(value, record)} value={bigClassSingleValue[record.courseId] || bigClassValue} />&nbsp;&nbsp;元/人</>
    },
  ];
  const smallClasscolumns = [
    {
      title: '课程名称',
      dataIndex: 'courseName',
      render: text => <><Tag color="blue">小班</Tag><span>{text}</span></>
    },
    {
      title: '小班',
      dataIndex: 'type',
      render: text => <span>小班</span>
    },
    {
      title: '课程类型',
      dataIndex: 'category',
      render: (text,record) => <span>{fortmatText('1',text)}</span>
    },
    {
      title: <><span>&nbsp;&nbsp;&nbsp;统一设置</span>&nbsp;&nbsp;&nbsp;&nbsp;<InputNumber min={0} onChange={smallClassSetting}/>&nbsp;&nbsp;元/人</>,
      dataIndex: 'costPerClassPersonGroup',
      render: (text, record) => <><span>每节课收费</span>&nbsp;&nbsp;&nbsp;<InputNumber min={0} onChange={value => smallSingleClassSetting(value, record)} value={smallClassSingleValue[record.courseId] || smallClassValue} />&nbsp;&nbsp;元/人</>
    },
  ];

  const equipmentClasscolumns = [
    {
      title: '课程名称',
      dataIndex: 'courseName',
      render: text => <><Tag color="blue">小班</Tag><span>{text}</span></>
    },
    {
      title: '小班',
      dataIndex: 'type',
      render: text => <span>小班</span>
    },
    {
      title: '课程类型',
      dataIndex: 'category',
      render: (text, record) => <span>{fortmatText('1', text)}</span>
    },
    {
      title: <><span>&nbsp;&nbsp;&nbsp;统一设置</span>&nbsp;&nbsp;&nbsp;&nbsp;<InputNumber min={0} onChange={equipmentClassSetting} />&nbsp;&nbsp;元/人</>,
      dataIndex: 'costPerClassPersonGroup',
      render: (text, record) => <><span>每节课收费</span>&nbsp;&nbsp;&nbsp;<InputNumber min={0} onChange={value => equipmentSingleClassSetting(value, record)} value={equipmentClassSingleValue[record.courseId] || equipmentClassValue} />&nbsp;&nbsp;元/人</>
    },
  ];
  const privateClasscolumns = [
    {
      title: '课程名称',
      dataIndex: 'courseName',
      render: text => <><Tag color="blue">私教</Tag><span>{text}</span></>
    },
    {
      title: '私教',
      dataIndex: 'type',
      render: text => <span>私教</span>
    },
    {
      title: '课程类型',
      dataIndex: 'category',
      render: (text,record) => <span>{fortmatText('3',text)}</span>
    },
    {
      title: <><span>每节课收费</span>&nbsp;&nbsp;&nbsp;<InputNumber min={0} onChange={privateClassOne2OneSetting}/>&nbsp;&nbsp;元/人</>,
      dataIndex: 'costPerClassPerson1to1',
      render: (text,record) => <><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        1对1</span>&nbsp;&nbsp;&nbsp;<InputNumber min={0} onChange={value=>privateSingleOne2OneClassSetting(value,record)} value={privateClassSingleValueOne2One[record.courseId]||privateClassValueOne2One}/>&nbsp;&nbsp;元/人</>
    },
    {
      title: <><span>每节课收费</span>&nbsp;&nbsp;&nbsp;<InputNumber min={0} onChange={privateClassOne2TwoSetting}/>&nbsp;&nbsp;元/人</>,
      dataIndex: 'costPerClassPerson1to2',
      render: (text,record) => <><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        1对2</span>&nbsp;&nbsp;&nbsp;<InputNumber min={0} onChange={value=>privateSingleOne2TwoClassSetting(value,record)} value={privateClassSingleValueOne2Two[record.courseId]||privateClassValueOne2Two}/>&nbsp;&nbsp;元/人</>
    },
    // {
    //   title: <><span>每节课收费</span>&nbsp;&nbsp;&nbsp;<InputNumber min={0} onChange={privateClassOne2ThreeSetting}/>&nbsp;&nbsp;元/人</>,
    //   dataIndex: 'costPerClassPerson1to3',
    //   render: (text,record) => <><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    //     1对3</span>&nbsp;&nbsp;&nbsp;<InputNumber min={0} onChange={value=>privateSingleOne2ThreeClassSetting(value,record)} value={privateClassSingleValueOne2Three[record.courseId]||privateClassValueOne2Three}/>&nbsp;&nbsp;元/人</>
    // },
  ];
  useEffect(() => {
    if (dispatch) {
       dispatch({
         type: 'cubeVipCard/fetchShopList',
         payload:{
           userId:db.get("user").userId
         }
       })
       dispatch({
        type: 'cubeVipCard/fetchVipCard',
        payload:{
          cardId:props.match.params.id
        }
      }).then((result)=>{
        vipCardTemp = result
        form.resetFields()
        //修改 cardType state的值
        setCardType(result.cardType)
        if(result.smallClassCoursesSupportedCardVOS){
          let smallClassKeys=[];
          result.smallClassCoursesSupportedCardVOS.map((item)=>{
            if(item.id){
              smallClassKeys.push(item.courseId)
              if(item.costPerClassPersonGroup){
                smallClassSingleValue[item.courseId]=item.costPerClassPersonGroup;
                setSmallClassSingleValue(smallClassSingleValue);
              }
            }
          })
          setSmallClassKeys(smallClassKeys)
         }

         if(result.equipmentClassCoursesSupportedCardVOS){
          let equipmentClassKeys=[];
          result.equipmentClassCoursesSupportedCardVOS.map((item)=>{
            if(item.id){
              equipmentClassKeys.push(item.courseId)
              if(item.costPerClassPersonGroup){
                equipmentClassSingleValue[item.courseId]=item.costPerClassPersonGroup;
                setEquipmentClassSingleValue(equipmentClassSingleValue);
              }
            }
          })
          setEquipmentClassKeys(smallClassKeys)
         }
    
         if(result.manyClassCoursesSupportedCardVOS){
          let bigClassKeys=[];
          result.manyClassCoursesSupportedCardVOS.map((item)=>{
            if(item.id){
              bigClassKeys.push(item.courseId)
              if(item.costPerClassPersonGroup){
                bigClassSingleValue[item.courseId]=item.costPerClassPersonGroup;
                setBigClassSingleValue(bigClassSingleValue);
              }
            }
          })
          setBigClassKeys(bigClassKeys)
        }
        if(result.privateClassCoursesSupportedCardVOS){
          let privateClassKeys=[];
          result.privateClassCoursesSupportedCardVOS.map((item)=>{
            if(item.id){
              privateClassKeys.push(item.courseId)
              if(item.costPerClassPerson1to1){
                privateClassSingleValueOne2One[item.courseId]=item.costPerClassPerson1to1;
                setPrivateClassSingleValueOne2One(privateClassSingleValueOne2One);
              }
              if(item.costPerClassPerson1to2){
                privateClassSingleValueOne2Two[item.courseId]=item.costPerClassPerson1to2;
                setPrivateClassSingleValueOne2Two(privateClassSingleValueOne2Two);
              }
              // if(item.costPerClassPerson1to3){
              //   privateClassSingleValueOne2Three[item.courseId]=item.costPerClassPerson1to3;
              //   setPrivateClassSingleValueOne2Three(privateClassSingleValueOne2Three);
              // }
            }
          })
          setPrivateClassKeys(privateClassKeys)
        }
      })
     }
     
   }, []);
  const formItemLayout = {
    labelCol: {
      xs: {
        span: 24,
      },
      sm: {
        span: 7,
      },
    },
    wrapperCol: {
      xs: {
        span: 24,
      },
      sm: {
        span: 12,
      },
      md: {
        span: 10,
      },
    },
  };
  const submitFormLayout = {
    wrapperCol: {
      xs: {
        span: 24,
        offset: 0,
      },
      sm: {
        span: 10,
        offset: 7,
      },
    },
  };

  //处理课程支持的会员卡
  const formatCourseCard = (cardId) =>{
    let coursesSupportedCardDTOS=[]
    if(privateClassKeys&&privateClassKeys.length>0){
      privateClassKeys.map((item)=>{
        let coursesSupportedCardDTO={
          cardId:cardId,
          courseId:item
        }
        if(privateClassSingleValueOne2One){
          if(privateClassSingleValueOne2One[item]){
            coursesSupportedCardDTO['costPerClassPerson1to1']=privateClassSingleValueOne2One[item]
          }else if(privateClassValueOne2One){
            coursesSupportedCardDTO['costPerClassPerson1to1']=privateClassValueOne2One
          }
        }else if(privateClassValueOne2One){
          coursesSupportedCardDTO['costPerClassPerson1to1']=privateClassValueOne2One
        }

        if(privateClassSingleValueOne2Two){
          if(privateClassSingleValueOne2Two[item]){
            coursesSupportedCardDTO['costPerClassPerson1to2']=privateClassSingleValueOne2Two[item]
          }else if(privateClassValueOne2Two){
            coursesSupportedCardDTO['costPerClassPerson1to2']=privateClassValueOne2Two
          }
        }else if(privateClassValueOne2Two){
          coursesSupportedCardDTO['costPerClassPerson1to2']=privateClassValueOne2Two
        }

        // if(privateClassSingleValueOne2Three){
        //   if(privateClassSingleValueOne2Three[item]){
        //     coursesSupportedCardDTO['costPerClassPerson1to3']=privateClassSingleValueOne2Three[item]
        //   }else if(privateClassValueOne2Three){
        //     coursesSupportedCardDTO['costPerClassPerson1to3']=privateClassValueOne2Three
        //   }
        // }else if(privateClassValueOne2Three){
        //   coursesSupportedCardDTO['costPerClassPerson1to3']=privateClassValueOne2Three
        // }
        coursesSupportedCardDTOS.push(coursesSupportedCardDTO);
      })
    }
    if(smallClassKeys&&smallClassKeys.length>0){
      smallClassKeys.map((item)=>{
        let coursesSupportedCardDTO={
          cardId:cardId,
          courseId:item
        }
        if(smallClassSingleValue){
          if(smallClassSingleValue[item]){
            coursesSupportedCardDTO['costPerClassPersonGroup']=smallClassSingleValue[item]
          }else if(smallClassValue){
            coursesSupportedCardDTO['costPerClassPersonGroup']=smallClassValue
          }
        }else if(smallClassValue){
          coursesSupportedCardDTO['costPerClassPersonGroup']=smallClassValue
        }
        coursesSupportedCardDTOS.push(coursesSupportedCardDTO);
      })
    }

    if (equipmentClassKeys && equipmentClassKeys.length > 0) {
      equipmentClassKeys.map((item) => {
        let coursesSupportedCardDTO = {
          courseId: item
        }
        if (equipmentClassSingleValue) {
          if (equipmentClassSingleValue[item]) {
            coursesSupportedCardDTO['costPerClassPersonGroup'] = equipmentClassSingleValue[item]
          } else if (equipmentClassValue) {
            coursesSupportedCardDTO['costPerClassPersonGroup'] = equipmentClassValue
          }
        } else if (equipmentClassValue) {
          coursesSupportedCardDTO['costPerClassPersonGroup'] = equipmentClassValue
        }
        coursesSupportedCardDTOS.push(coursesSupportedCardDTO);
      })
    }


    if (bigClassKeys && bigClassKeys.length > 0) {
      bigClassKeys.map((item) => {
        let coursesSupportedCardDTO = {
          courseId: item
        }
        if(bigClassSingleValue){
          if(bigClassSingleValue[item]){
            coursesSupportedCardDTO['costPerClassPersonGroup']=bigClassSingleValue[item]
          }else if(bigClassValue){
            coursesSupportedCardDTO['costPerClassPersonGroup']=bigClassValue
          }
        }else if(bigClassValue){
          coursesSupportedCardDTO['costPerClassPersonGroup']=bigClassValue
        }
        coursesSupportedCardDTOS.push(coursesSupportedCardDTO);
      })
    }
    return coursesSupportedCardDTOS;
  }

  /**
   * 提交表单
   * @param {*} values 
   */
  const onFinish = async () => {
    if(!vipCard){
      return;
    }
    const hide = message.loading('正在更新');
    const values = await form.validateFields();
    try {
      //这里需要处理课程支持的会员卡
      let coursesSupportedCardDTOS = formatCourseCard(vipCard.cardId)
      values.cardId=vipCard.cardId;
      values.coursesSupportedCardDTOS=coursesSupportedCardDTOS;
      if(venueId !== '101'){
        values.cardSupportVenuesDTOS = [venueId];
      }
      let result = await updateVipCard({ ...values });
      hide();
      if(result.code===0){
        message.success('更新成功');
        history.push(`/vip/card`)
        return true;
      }else{
        message.error(result.message);
        return false;
      }
    }catch(error){
      console.log('error====>',error)
      hide();
      message.error('更新失败，请重试');
      return false;
    } 
  };

  /**
   * 显示隐藏高级设置
   */
  const toggle = () =>{
    setSetting(!setting)
  }

  /**
   * 显示隐藏私教排班
   */
  const toggleSinglePlan = () =>{
    setSinglePlan(!singlePlan)
  }

  /**
   * 显示隐藏团课排期
   */
  const toggleGroupPlan = () =>{
    setGroupPlan(!groupPlan)
  }

  /**
   * 显示隐藏小班排期
   */
  const toggleSmallGroupPlan = () =>{
    setSmallGroupPlan(!smallGroupPlan)
  }

  const toggleEquipmentGroupPlan = () => {
    setEquipmentGroupPlan(!equipmentGroupPlan)
  }

  /**
   * 修改会员卡类型
   */
  const onChange = (e) =>{
    setCardType(e.target.value)
    //切换之后重置之前新增
    form.setFieldsValue({
      settingPriceGradientDTOS:[]
    })
    //体验卡不允许转让
    if (e.target.value === '4') {
      form.setFieldsValue({
        cardTransferSettingsDTO: {
          isSupport: '1',
          poundage: ''
        }
      })
    }
  }

  /**
   * 更改选中的课程
   */
  const selectCoursesSupportedCardDTOS = (record, selected,type) =>{
    
  }

  const changeCoursesSupportedCardDTOS = (selectedRowKeys,type) =>{
    if(type=='private'){
      setPrivateClassKeys(selectedRowKeys)
    }else if(type=='big'){
      setBigClassKeys(selectedRowKeys)
    }else if(type=='small'){
      setSmallClassKeys(selectedRowKeys)
    }else if(type == 'equipment'){
      setEquipmentClassKeys(selectedRowKeys)
    }
  }
  const _search = (courseType,values) =>{
    let _vipCard ={...cloneVipCard};
    if(courseType=='3'){
      let _privateClassCoursesSupportedCardVOS = vipCardTemp.privateClassCoursesSupportedCardVOS
      if(values.courseName){
        _privateClassCoursesSupportedCardVOS = _privateClassCoursesSupportedCardVOS.filter((item)=>{
          if(item.courseName.indexOf(values.courseName)>-1){
            return item
          }
        })
      }
      if(values.category){
        _privateClassCoursesSupportedCardVOS = _privateClassCoursesSupportedCardVOS.filter((item)=>{
          if(item.category==values.category){
            return item
          }
        })
      }
      _vipCard.privateClassCoursesSupportedCardVOS = _privateClassCoursesSupportedCardVOS
      dispatch({
        type: 'cubeVipCard/common',
        payload:{
          vipCard:{..._vipCard}
        }
      })
      console.log('vipCardTemp=====>',vipCardTemp)
    }else if(courseType=='2'){
      let _manyClassCoursesSupportedCardVOS = vipCardTemp.manyClassCoursesSupportedCardVOS
      if(values.courseName){
        _manyClassCoursesSupportedCardVOS = _manyClassCoursesSupportedCardVOS.filter((item)=>{
          if(item.courseName.indexOf(values.courseName)>-1){
            return item
          }
        })
      }
      if(values.category){
        _manyClassCoursesSupportedCardVOS = _manyClassCoursesSupportedCardVOS.filter((item)=>{
          if(item.category==values.category){
            return item
          }
        })
      }
      _vipCard.manyClassCoursesSupportedCardVOS = _manyClassCoursesSupportedCardVOS
      dispatch({
        type: 'cubeVipCard/common',
        payload:{
          vipCard:{..._vipCard}
        }
      })
    }else if(courseType=='1'){
      let _smallClassCoursesSupportedCardVOS = vipCardTemp.smallClassCoursesSupportedCardVOS
      if(values.courseName){
        _smallClassCoursesSupportedCardVOS = _smallClassCoursesSupportedCardVOS.filter((item)=>{
          if(item.courseName.indexOf(values.courseName)>-1){
            return item
          }
        })
      }
      if(values.category){
        _smallClassCoursesSupportedCardVOS = _smallClassCoursesSupportedCardVOS.filter((item)=>{
          if(item.category==values.category){
            return item
          }
        })
      }
      _vipCard.smallClassCoursesSupportedCardVOS = _smallClassCoursesSupportedCardVOS
      dispatch({
        type: 'cubeVipCard/common',
        payload:{
          vipCard:{..._vipCard}
        }
      })
    } else if (courseType == '4') {
      let _equipmentClassCoursesSupportedCardVOS = vipCardTemp.equipmentClassCoursesSupportedCardVOS
      if (values.courseName) {
        _equipmentClassCoursesSupportedCardVOS = _equipmentClassCoursesSupportedCardVOS.filter((item) => {
          if (item.courseName.indexOf(values.courseName) > -1) {
            return item
          }
        })
      }
      if (values.category) {
        _equipmentClassCoursesSupportedCardVOS = _equipmentClassCoursesSupportedCardVOS.filter((item) => {
          if (item.category == values.category) {
            return item
          }
        })
      }
      _vipCard.equipmentClassCoursesSupportedCardVOS = _equipmentClassCoursesSupportedCardVOS
      dispatch({
        type: 'cubeVipCard/common',
        payload: {
          vipCard: { ..._vipCard }
        }
      })
    }
  } 
  return (
    <PageHeaderWrapper className={styles.saveVip}>
      <Form
          style={{
            marginTop: 8,
          }}
          form={form}
          name="basic"
          initialValues={vipCard}
        >
      <Card
      title="会员卡信息"
      style={{
        marginBottom: 24,
      }}
       bordered={false}>
          <FormItem
            {...formItemLayout}
            label="会员卡名称"
            name="cardName"
            rules={[
              {
                required: true,
                message: '请输入会员卡名称',
              },
            ]}
          >
            <Input placeholder="请输入"/>
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="会员卡类型"
            name="cardType"
            rules={[
              {
                required: true,
                message: '请选择会员卡类型',
              },
            ]}
          >
            <Radio.Group onChange={onChange}>
              {
                db.get("dictTypeList") && db.get("dictTypeList")["member_card_type"].map((item, index) => {
                  return <Radio value={item.value} key={index}>{item.label}</Radio>
                })
              }
            </Radio.Group>
          </FormItem>
          {
            venueId === '101' && (
              <FormItem
                {...formItemLayout}
                label="支持场馆"
                name="cardSupportVenuesDTOS"
                rules={[
                  {
                    required: true,
                    message: '请勾选场馆',
                  },
                ]}
              >
                <Checkbox.Group options={shopOptionList} />
              </FormItem>
            )
          }
      </Card>
      <Card
        title="设置价格"
        style={{
          marginBottom: 24,
        }}
        bordered={false}
       >
        {
          !cardType&&<Empty/>
        }
        {
          cardType=="1"&&<Form.List name="settingPriceGradientDTOS">
          {(fields, { add, remove }) => {
            return (
              <div>
                {fields.map((field, index) => (
                  <Row key={field.key}>
                    <Col span={5}>
                      <Form.Item
                        label="储值金额"
                        name={[field.name, "storedValueAmount"]}
                        fieldKey={[field.fieldKey, "storedValueAmount"]}
                      >
                          <InputNumber
                            min={0}
                            formatter={value => `${value}元`}
                            parser={value => value.replace('元', '')}
                          />
                      </Form.Item>
                    </Col>
                    <Col span={5}>
                      <Form.Item
                        label="原价"
                        name={[field.name, "originalPrice"]}
                        fieldKey={[field.fieldKey, "originalPrice"]}
                      >
                       <InputNumber
                          min={0}
                          formatter={value => `${value}元`}
                          parser={value => value.replace('元', '')}
                        />
                      </Form.Item>
                    </Col>
                    <Col span={5}>
                      <Form.Item
                        label="售价"
                        name={[field.name, "sellingPrice"]}
                        fieldKey={[field.fieldKey, "sellingPrice"]}
                      >
                       <InputNumber
                          min={0}
                          formatter={value => `${value}元`}
                          parser={value => value.replace('元', '')}
                        />
                      </Form.Item>
                    </Col>
                    <Col span={5}>
                      <Form.Item
                        label="有效期"
                        name={[field.name, "periodValidity"]}
                        fieldKey={[field.fieldKey, "periodValidity"]}
                      >
                       <InputNumber style={{width:'90px'}} suffix="天"/>
                      </Form.Item>
                    </Col>
                    <Col flex="none" span={4}>
                      <Button icon={<CloseSquareFilled />} onClick={() => {remove(field.name)}}>
                        删除
                      </Button>
                    </Col>
                  </Row>
                ))}
                <Form.Item>
                  <Button
                    type="dashed"
                    onClick={() => {
                      add();
                    }}
                    style={{ width: "100%" }}
                  >
                   新增  
                  </Button>
                </Form.Item>
              </div>
            );
          }}
        </Form.List>
        }
        {
          (cardType == "2" || cardType == "4")&&<Form.List name="settingPriceGradientDTOS">
          {(fields, { add, remove }) => {
            return (
              <div>
                {fields.map((field, index) => (
                  <Row key={field.key}>
                    {/* <Col span={4}>
                      <Form.Item
                        label="私教次数"
                        name={[field.name, "numberPrivateTeaching"]}
                        fieldKey={[field.fieldKey, "numberPrivateTeaching"]}
                      >
                          <InputNumber
                            min={0}
                            formatter={value => `${value}次`}
                            parser={value => value.replace('次', '')}
                          />
                      </Form.Item>
                    </Col> */}
                    <Col span={4}>
                      <Form.Item
                        label="次数"
                        name={[field.name, "numberGroupLessons"]}
                        fieldKey={[field.fieldKey, "numberGroupLessons"]}
                      >
                          <InputNumber
                            min={0}
                            formatter={value => `${value}次`}
                            parser={value => value.replace('次', '')}
                          />
                      </Form.Item>
                    </Col>
                    {/* <Col span={4}>
                      <Form.Item
                        label="小班次数"
                        name={[field.name, "numberSmallClasses"]}
                        fieldKey={[field.fieldKey, "numberSmallClasses"]}
                      >
                          <InputNumber
                            min={0}
                            formatter={value => `${value}次`}
                            parser={value => value.replace('次', '')}
                          />
                      </Form.Item>
                    </Col> */}
                    <Col span={3}>
                      <Form.Item
                        label="原价"
                        name={[field.name, "originalPrice"]}
                        fieldKey={[field.fieldKey, "originalPrice"]}
                      >
                       <InputNumber
                          min={0}
                          formatter={value => `${value}元`}
                          parser={value => value.replace('元', '')}
                        />
                      </Form.Item>
                    </Col>
                    <Col span={3}>
                      <Form.Item
                        label="售价"
                        name={[field.name, "sellingPrice"]}
                        fieldKey={[field.fieldKey, "sellingPrice"]}
                      >
                       <InputNumber
                          min={0}
                          formatter={value => `${value}元`}
                          parser={value => value.replace('元', '')}
                        />
                      </Form.Item>
                    </Col>
                    <Col span={4}>
                      <Form.Item
                        label="有效期"
                        name={[field.name, "periodValidity"]}
                        fieldKey={[field.fieldKey, "periodValidity"]}
                      >
                       <InputNumber style={{width:'90px'}} suffix="天"/>
                      </Form.Item>
                    </Col>
                    <Col flex="none" span={2}>
                      <Button icon={<CloseSquareFilled />} onClick={() => {remove(field.name)}}>
                        删除
                      </Button>
                    </Col>
                  </Row>
                ))}
                <Form.Item>
                  <Button
                    type="dashed"
                    onClick={() => {
                      add();
                    }}
                    style={{ width: "100%" }}
                  >
                   新增  
                  </Button>
                </Form.Item>
              </div>
            );
          }}
        </Form.List>
        }
        {
          cardType=="3"&&<Form.List name="settingPriceGradientDTOS">
          {(fields, { add, remove }) => {
            return (
              <div>
                {fields.map((field, index) => (
                  <Row key={field.key}>
                    <Col span={5}>
                      <Form.Item
                        label="期限天数"
                        name={[field.name, "durationDays"]}
                        fieldKey={[field.fieldKey, "durationDays"]}
                      >
                          <InputNumber
                            min={0}
                            formatter={value => `${value}天`}
                            parser={value => value.replace('天', '')}
                          />
                      </Form.Item>
                    </Col>
                    <Col span={5}>
                      <Form.Item
                        label="原价"
                        name={[field.name, "originalPrice"]}
                        fieldKey={[field.fieldKey, "originalPrice"]}
                      >
                       <InputNumber
                          min={0}
                          formatter={value => `${value}元`}
                          parser={value => value.replace('元', '')}
                        />
                      </Form.Item>
                    </Col>
                    <Col span={5}>
                      <Form.Item
                        label="售价"
                        name={[field.name, "sellingPrice"]}
                        fieldKey={[field.fieldKey, "sellingPrice"]}
                      >
                       <InputNumber
                          min={0}
                          formatter={value => `${value}元`}
                          parser={value => value.replace('元', '')}
                        />
                      </Form.Item>
                    </Col>
                    <Col flex="none" span={4}>
                      <Button icon={<CloseSquareFilled />} onClick={() => {remove(field.name)}}>
                        删除
                      </Button>
                    </Col>
                  </Row>
                ))}
                <Form.Item>
                  <Button
                    type="dashed"
                    onClick={() => {
                      add();
                    }}
                    style={{ width: "100%" }}
                  >
                   新增  
                  </Button>
                </Form.Item>
              </div>
            );
          }}
        </Form.List>
        }
      </Card>
      <Card
        title="转让设置"
        style={{
          marginBottom: 24,
        }}
        bordered={false}
       >
          <FormItem
            {...formItemLayout}
            label="转让"
            name={['cardTransferSettingsDTO','isSupport']}
            rules={[
              {
                required: true,
                message: '请勾选是否支持转让',
              },
            ]}
          >
            <Radio.Group>
                <Radio value="0">
                支持
                </Radio>
                <Radio value="1">
                不支持
                </Radio>
              </Radio.Group>
          </FormItem>
          {/* <FormItem
            {...formItemLayout}
            label="手续费"
            name={['cardTransferSettingsDTO','poundage']}
          >
             <InputNumber
              min={0}
              style={{ width: '100%' }}
              formatter={value => `${value}元`}
              parser={value => value.replace('元', '')}
              disabled={cardType === '4'}
            />
          </FormItem> */}
      </Card>
      <Card
        title="高级设置"
        style={{
          marginBottom: 24,
        }}
        bordered={false}
        extra={ 
          !setting?
          <Tooltip placement="top" title="展开">
            <DownSquareFilled  onClick={()=>toggle()}/>
          </Tooltip>
          :
          <Tooltip placement="top" title="收起">
          <UpSquareFilled onClick={()=>toggle()}/>
        </Tooltip>}
       >
         {
           setting?
          <>
           {/* <FormItem
              {...formItemLayout}
              label="展示排序"
              name={['cardSuperSettingsDTO','showSort']}
            >
                <InputNumber
                min={0}
                style={{ width: '100%' }}
              />
            </FormItem>
             <FormItem
              {...formItemLayout}
              label="在线购买"
              name={['cardSuperSettingsDTO','isOnlinePurchase']}
            >
              <Radio.Group>
                  <Radio value="1">
                  支持
                  </Radio>
                  <Radio value="2">
                  不支持
                  </Radio>
                </Radio.Group>
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="每名会员最多购买"
              name={['cardSuperSettingsDTO','mostBuyNum']}
            >
                <InputNumber
                min={0}
                style={{ width: '100%' }}
                formatter={value => `${value}次`}
                parser={value => value.replace('次', '')}
              />
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="单次可约人数上限"
              name={['cardSuperSettingsDTO','singleBookingCourseUpper']}
            >
                <InputNumber
                min={0}
                style={{ width: '100%' }}
                formatter={value => `${value}人`}
                parser={value => value.replace('人', '')}
              />
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="每周可约团课次数上限"
              name={['cardSuperSettingsDTO','weekBookingCourseUpper']}
            >
                <InputNumber
                min={0}
                style={{ width: '100%' }}
                formatter={value => `${value}次`}
                parser={value => value.replace('次', '')}
              />
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="每日可约次数上限"
              name={['cardSuperSettingsDTO','monthBookingCourseUpper']}
            >
                <InputNumber
                min={0}
                style={{ width: '100%' }}
                formatter={value => `${value}次`}
                parser={value => value.replace('次', '')}
              />
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="每日可上团课上限"
              name={['cardSuperSettingsDTO','dayTeamClassUpper']}
            >
                <InputNumber
                min={0}
                style={{ width: '100%' }}
                formatter={value => `${value}次`}
                parser={value => value.replace('次', '')}
              />
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="允许已预约未签到次数"
              name={['cardSuperSettingsDTO','allowMakeNoSignNum']}
            >
                <InputNumber
                min={0}
                style={{ width: '100%' }}
                formatter={value => `${value}次`}
                parser={value => value.replace('次', '')}
              />
            </FormItem> */}
            <FormItem
              {...formItemLayout}
              label="从第一节课算开卡"
              name={['cardSuperSettingsDTO','isFirstClassOpenCard']}
            >
              <Radio.Group>
                  <Radio value="1">
                  是
                  </Radio>
                  <Radio value="2">
                  否
                  </Radio>
                </Radio.Group>
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="设置为体验卡"
              name={['cardSuperSettingsDTO','isExperienceCard']}
            >
               <Radio.Group>
                  <Radio value="1">
                  是
                  </Radio>
                  <Radio value="2">
                  否
                  </Radio>
                </Radio.Group>
            </FormItem>
            {/* <FormItem
              {...formItemLayout}
              label="会员卡背景"
              name={['cardSuperSettingsDTO','bgPictureUrl']}
            >
               <Radio.Group bordered={false}>
                 {
                   imgs.map((value,index)=><Radio.Button key={index} value={value}><Avatar shape="square"  src={value} /></Radio.Button>)
                 }
              </Radio.Group>
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="备注"
              name={['cardSuperSettingsDTO','comments']}
            >
               <TextArea rows={4} placeholder="请输入" />
            </FormItem> */}
          </>
           :<></>
         }
      </Card>
      <Card
        title="设置支持的私教排班"
        style={{
          marginBottom: 24,
        }}
        bordered={false}
        extra={ 
          !singlePlan?
          <Tooltip placement="top" title="展开">
            <DownSquareFilled  onClick={()=>toggleSinglePlan()}/>
          </Tooltip>
            :
          <Tooltip placement="top" title="收起">
            <UpSquareFilled onClick={()=>toggleSinglePlan()}/>
        </Tooltip>}
       >
         {
           !singlePlan?
           <>
             <SearchForm courseType={3} search={(courseType,values)=>_search(courseType,values)}/>
             <Table
              rowKey="courseId"
              size="small"
              pagination={false}
              columns={privateClasscolumns}
              dataSource={vipCard.privateClassCoursesSupportedCardVOS}
              rowSelection={{
                selectedRowKeys:privateClassKeys,
                onSelect: (record, selected) => {
                  selectCoursesSupportedCardDTOS(record, selected)
                },
                onChange: (selectedRowKeys, selectedRows) => {
                  changeCoursesSupportedCardDTOS(selectedRowKeys,'private')
                }
              }}
            />
           </>
           :
           <></>
         }
      </Card>
      <Card
        title="设置支持的大班课程"
        style={{
          marginBottom: 24,
        }}
        bordered={false}
        extra={ 
          !groupPlan?
              <Tooltip placement="top" title="展开">
                <DownSquareFilled  onClick={()=>toggleGroupPlan()}/>
              </Tooltip>
              :
              <Tooltip placement="top" title="收起">
                <UpSquareFilled onClick={()=>toggleGroupPlan()}/>
              </Tooltip>
       }
       >
         {
           !groupPlan?
           <>
             <SearchForm courseType={2} search={(courseType,values)=>_search(courseType,values)}/>
             <Table
                rowKey="courseId"
                size="small"
                pagination={false}
                columns={bigClasscolumns}
                dataSource={vipCard.manyClassCoursesSupportedCardVOS}
                rowSelection={{
                  selectedRowKeys:bigClassKeys,
                  onSelect: (record, selected) => {
                    selectCoursesSupportedCardDTOS(record, selected)
                  },
                  onChange: (selectedRowKeys, selectedRows) => {
                    changeCoursesSupportedCardDTOS(selectedRowKeys,'big')
                  }
                }}
              />
           </>
           :
           <></>
         }
      </Card>
        <Card
          title="设置支持的小班课程"
          style={{
            marginBottom: 24,
          }}
          bordered={false}
          extra={ 
            !smallGroupPlan?
                <Tooltip placement="top" title="展开">
                  <DownSquareFilled  onClick={()=>toggleSmallGroupPlan()}/>
                </Tooltip>
                :
                <Tooltip placement="top" title="收起">
                  <UpSquareFilled onClick={()=>toggleSmallGroupPlan()}/>
                </Tooltip>
        }
        >
          {
            !smallGroupPlan?
            <>
              <SearchForm courseType={1} search={(courseType,values)=>_search(courseType,values)}/>
              <Table
                rowKey="courseId"
                size="small"
                pagination={false}
                columns={smallClasscolumns}
                dataSource={vipCard.smallClassCoursesSupportedCardVOS}
                rowSelection={{
                  selectedRowKeys:smallClassKeys,
                  onSelect: (record, selected) => {
                    selectCoursesSupportedCardDTOS(record, selected)
                  },
                  onChange: (selectedRowKeys, selectedRows) => {
                    changeCoursesSupportedCardDTOS(selectedRowKeys,'small')
                  }
                }}
              />
            </> 
            :
            <></>
          }
        </Card>
        <Card
          title="设置支持的器械课程"
          style={{
            marginBottom: 24,
          }}
          bordered={false}
          extra={
            !equipmentGroupPlan ?
              <Tooltip placement="top" title="展开">
                <DownSquareFilled onClick={() => toggleEquipmentGroupPlan()} />
              </Tooltip>
              :
              <Tooltip placement="top" title="收起">
                <UpSquareFilled onClick={() => toggleEquipmentGroupPlan()} />
              </Tooltip>
          }
        >
          {
            !equipmentGroupPlan ?
              <>
                <SearchForm courseType={1} search={(courseType, values) => _search(courseType, values)} />
                <Table
                  rowKey="courseId"
                  size="small"
                  pagination={false}
                  columns={equipmentClasscolumns}
                  dataSource={vipCard.equipmentClassCoursesSupportedCardVOS}
                  rowSelection={{
                    selectedRowKeys: equipmentClassKeys,
                    onSelect: (record, selected) => {
                      selectCoursesSupportedCardDTOS(record, selected)
                    },
                    onChange: (selectedRowKeys, selectedRows) => {
                      changeCoursesSupportedCardDTOS(selectedRowKeys, 'equipment')
                    }
                  }}
                />
              </>
              :
              <></>
          }
        </Card>
        <Affix offsetBottom={10}>
          <Button type="primary" onClick={onFinish} loading={submitting}>
            提交
          </Button>
          <Button
            style={{
              marginLeft: 8,
            }}
            onClick={() => window.history.back()}
          >
            返回
          </Button>
        </Affix>
      </Form>
    </PageHeaderWrapper>
  );
};

export default connect(({ loading,cubeVipCard }) => ({
  submitting: loading.effects['cubeVipCard/add'],
  shopOptionList: cubeVipCard.shopOptionList,
  vipCard: cubeVipCard.vipCard,
  cloneVipCard:cubeVipCard.cloneVipCard,
}))(BasicForm);
